/*! index layout */
#container {
  -webkit-flex: 1;
  flex: 1;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;

  @media ($mini) {
    width: 96%;
  }

  @media ($tablet) {
    width: 94%;
  }

  @media ($desktop) {
    width: 82%;
  }
}

#main {
  margin: 1em 0 0;
  line-height: $line-height+0.3;

  @media ($tablet) {
    margin: 2em 0 0;
    width: 75%;
    float: left;
    transition: margin 0.5s ease-out;
  }

  section.post {
    background: $color-section;
    margin-bottom: 0.125em;

    a {
      display: block;
      $border-left: 0.5em solid $color-gray;
      border-left: $border-left;
      transition: $border-left .45s;
      padding: 0.5em;

      @media ($mini) {
        padding: 1em;
      }

      &:hover {
        border-left: 0.5em solid $color-theme;
      }

      h1 {
        color: $color-blue;
        line-height: $line-height+0.5;
      }

      p {
        color: $color-font;
      }

      time {
        color: $color-font;
        display: block;
        margin: 0.5em 0;
        font-size: 0.9em;
      }
    }
  }

  article.post-expand {
    background: $color-section;
    margin-bottom: 3.5em;

    //-webkit-box-shadow: 2px 2px 3px darken(color-background,20%)
    //box-shadow: 2px 2px 3px darken(color-background,20%)
    //-webkit-border-radius: 3px
    //border-radius: 3px
    .img-logo {
      max-width: 180px;
      max-height: 96px;
      display: block !important;
      margin-right: .7em;
      margin-left: .7em;
      padding: 0;
      float: right;
      clear: right;
    }

    .img-topic {
      max-width: 300px;
      max-height: 1800px;
      display: block !important;
      margin-left: .7em;
      margin-right: .7em;
      padding: 0;
      float: right;
      clear: right;
    }

    .article-more-link {

      //margin-top: 1.5em
      //padding-top: 1em
      //border-top: 2px solid #ddd
      a {
        display: inline-block;
        line-height: 1em;
        padding: 6px 15px;
        border-radius: 15px;
        background: $color-background;
        color: $color-font;
        //text-shadow: 0 1px #fff
        text-decoration: none;

        &:hover {
          background: $color-theme;
          color: #fff;
          text-decoration: none;
          //text-shadow: 0 1px darken(color-theme, 20%)
        }
      }
    }
  }
}

#archive-page {
  section.post {
    a {
      font-size: 0.9em;
      padding: 0.5em !important;

      time {
        @media ($mini) {
          padding-left: 1em;
        }
      }
    }
  }
}


.moveMain {
  margin-left: 10% !important;
}

.unexpand .prev {
  border-left: 0.5em solid $color-gray;

  &:hover {
    border-left: 0.5em solid $color-theme;
  }
}

#page-nav {
  background: $color-section;
  text-align: center;
  overflow: hidden;

  a {
    display: inline-block;
    padding: 0.5em 1em;
  }

  a {
    color: $color-blue;

    &:hover {
      background: $color-gray;
      color: $color-theme;
    }
  }

  .prev {
    float: left;
    transition: border-left .5s;

    span:before {
      font-family: $font-icon-family;
      @include font-smoothing();
      content: "\f053";
      padding-right: 0.5em;
    }
  }
  .first {
    float: left;
    transition: border-left .5s;

    span:before {
      font-family: $font-icon-family;
      @include font-smoothing();
      content: "\f100";
      padding-right: 0.5em;
    }
  }

  .next {
    float: right;

    span:before {
      font-family: $font-icon-family;
      @include font-smoothing();
      content: "\f054";
      padding-left: 0.5em;
    }
  }
  .last {
    float: right;

    span:before {
      font-family: $font-icon-family;
      @include font-smoothing();
      content: "\f101";
      padding-left: 0.5em;
    }
  }

  .page-number {
    display: none;
    padding: 0.5em 1em;

    @media ($mini) {
      display: inline-block;
    }
  }

  .current {
    color: darken($color-gray, 10%);
    font-weight: bold;
  }

  .space {
    color: $color-blue;
  }
}

/*! page layout */
.page {
  @media ($tablet) {
    margin-left: 10% !important;
  }
}

/*! archive layout */
.category-icon:before,
.tag-icon:before,
.archive-icon:before {
  font-family: $font-icon-family;
  @include font-smoothing();
  color: $color-gray;
  font-size: $font-size;
  padding-right: 0.3em;
}

.category-icon:before {
  content: "\f07b";
}

.tag-icon:before {
  content: "\f02c";
}

.archive-icon:before {
  content: "\f187";
}

.archive-title {
  margin: 1em 0;
  padding: 2em;

  @media ($tablet) {
    margin: 2em 0;
    width: 18.5%;
    padding-left: 0.5%;
    float: left;
  }

  background: $color-section;
  border-left: 0.5em solid $color-gray;

  h2 {
    width: 90%;
    color: $color-blue;
    font-size: $font-size+20;
  }

  a {
    color: $color-blue;
    transition: $color-blue .5s;

    &:hover {
      color: $color-theme;
      transition: $color-theme .5s;
    }
  }
}

.current {
  color: $color-orange  !important;
}

.archive-part {
  @media ($mini) {
    min-height: 200px;
  }

  @media ($tablet) {
    //width 78% !important
    float: right;
    margin-left: 2% !important;
  }

  section.post {
    width: 100%;

    time {
      font-size: 1.1em !important;
      float: left;

      @media ($phonemax) {
        width: 100%;
      }

      @media ($phone) {
        width: 20%;
      }
    }
  }
}

.archive-nav {
  @media ($mini) {
    width: 100%;
    float: left;
    margin-top: 1em;
  }
}

/*! tags&categories layout */
.all-list-box {
  min-height: 400px;
}